<template>
    <div>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
        >
            <el-menu-item index="0">
            <img
                style="width: 100px"
                src="../image/element-plus-logo.svg"
                alt="Element logo"
            />
            </el-menu-item>
            <el-menu-item index="1"><router-link to='/'>首页</router-link></el-menu-item>
            <el-menu-item index="2"><router-link to='/cart'>购物车</router-link></el-menu-item>
            <el-menu-item index="3"><router-link to='/order'>订单</router-link></el-menu-item>
            <el-menu-item index="4"><router-link to='/guanyu'>关于</router-link></el-menu-item>
            <div style="flex-grow: 1;"></div>
            <el-menu-item index="5">{{ name }}欢迎你！</el-menu-item>
            <el-menu-item index="6" v-if="name=='游客'"><router-link to='/login'>登入/注册</router-link></el-menu-item>
            <el-menu-item index="7" v-else @click="goBack()">退出</el-menu-item>

        </el-menu>

    </div>
</template>
<script>
export default {
    data(){
        return{
            name:'游客'
        }
    },
    mounted(){
        if(sessionStorage.getItem("username") == null){
            this.name = '游客'
        }else{
            this.name = sessionStorage.getItem("username")
        }
    },
    methods:{
        goBack(){
            this.name = '游客',
            sessionStorage.setItem("username",'游客')
            sessionStorage.setItem("token",'')
        }
    }
}
</script>
<style scoped>
    a:-webkit-any-link{
        text-decoration: none;
    }
    .el-menu{
    background-color:  rgb(252, 250, 221);
}
</style>